/* =========================================================
   METAORION / G-INDITURE WEBSITE
   WEBSITE STYLE — GLOBAL DESIGN SYSTEM v2.0

   SINGLE SOURCE OF TRUTH

   This file is shared by EVERY page.

   GLOBAL COMPONENTS
   -----------------
   01. Design tokens
   02. Reset / base
   03. Typography
   04. Header / navigation
   05. Buttons / actions
   06. Hero
   07. Sections / section-head
   08. Grid system
   09. Cards
   10. Central visuals
   11. Alternative visual rows
   12. Product / screen presentation
   13. Process / product road
   14. Outcome / proof cards
   15. Feature pills
   16. Trust / proof statements
   17. CTA
   18. Footer
   19. Reusable visual primitives
   20. Responsive system

   RULE
   ----
   Pages should provide CONTENT and choose GLOBAL COMPONENTS.
   Page-specific CSS is exceptional and should not recreate
   typography, cards, grids, images, buttons, spacing or
   responsive behaviour already defined here.
========================================================= */


/* =========================================================
   01. DESIGN TOKENS
========================================================= */

:root{

  /* ---------- Brand ---------- */

  --navy:#071c34;
  --navy2:#0c2947;

  --ink:#102a46;

  --teal:#16a6b8;
  --teal2:#0c8fa1;

  --gold:#f2a81d;


  /* ---------- Surfaces ---------- */

  --paper:#f7fafb;
  --white:#ffffff;
  --soft:#edf5f7;
  --soft2:#f3f8f9;


  /* ---------- Text / Lines ---------- */

  --muted:#63758a;
  --line:#d8e2e8;
  --line-soft:#e5edf0;


  /* ---------- Shape / Elevation ---------- */

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;

  --shadow-sm:0 4px 14px rgba(16,42,70,.05);
  --shadow:0 8px 24px rgba(7,28,52,.08);
  --shadow-lg:0 18px 45px rgba(16,42,70,.12);


  /* ---------- Layout ---------- */

  --container:1240px;
  --content:1160px;

  --space-xs:8px;
  --space-sm:12px;
  --space-md:18px;
  --space-lg:28px;
  --space-xl:42px;
  --space-xxl:64px;
  --space-section:86px;


  /* ---------- Fonts ---------- */

  --font-heading:Newsreader, Georgia, serif;
  --font-body:Inter, Arial, sans-serif;
  --font-label:"IBM Plex Mono", monospace;


  /* ---------- Typography ---------- */

  --type-h1:clamp(3.2rem,4.6vw,5rem);
  --type-h2:clamp(2.4rem,3.2vw,3.4rem);
  --type-h3:22px;

  --type-body:15px;
  --type-small:13px;
  --type-label:11px;
  --type-eyebrow:14px;
}


/* =========================================================
   02. RESET / BASE
========================================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--ink);
  background:var(--white);
  font-family:var(--font-body);
}

img{
  display:block;
  max-width:100%;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea,
select{
  font:inherit;
}

p{
  font-family:var(--font-body);
}

.container{
  width:min(var(--container),calc(100% - 48px));
  margin-inline:auto;
}

.skip,
.skip-link{
  position:absolute;
  left:-9999px;
}

.skip:focus,
.skip-link:focus{
  left:16px;
  top:16px;
  z-index:99;
  padding:10px;
  background:var(--white);
}


/* =========================================================
   03. TYPOGRAPHY
========================================================= */

h1,
h2,
h3{
  font-family:var(--font-heading);
  color:var(--ink);
  font-weight:600;
}

h1{
  font-size:var(--type-h1);
  line-height:.96;
  letter-spacing:-.035em;
  margin:0;
}

h2{
  font-size:var(--type-h2);
  line-height:1.08;
  letter-spacing:-.025em;
  margin:0;
}

h3{
  font-size:var(--type-h3);
  line-height:1.15;
  margin:0;
}

.eyebrow{
  display:inline-flex;
  align-items:center;

  margin:0 0 16px;
  padding:5px 9px;

  background:var(--teal);
  color:var(--white);

  font-family:var(--font-label);
  font-size:12px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:.10em;
  text-transform:uppercase;

  border-radius:3px;
}

.section-head{
  max-width:930px;
  margin:0 0 var(--space-xl);
  text-align:left;
}

.section-head.center{
  margin-inline:auto;
  text-align:center;
}

.section-head .eyebrow{
  margin-bottom:16px;
}

.section-head h2{
  margin:0;
}

.section-head p{
  max-width:720px;
  margin:14px 0 0;
  color:var(--muted);
  font-size:var(--type-body);
  line-height:1.6;
}

.section-head.center p{
  margin-inline:auto;
}


/* =========================================================
   04. HEADER / NAVIGATION
========================================================= */

.header{
  position:sticky;
  top:0;
  z-index:20;
  height:72px;
  background:var(--white);
  border-bottom:1px solid #e3e9ed;
}

.header-inner{
  width:min(var(--container),calc(100% - 48px));
  height:100%;
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:28px;
}

.brand,
.brand-lockup{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}

.brand{
  min-width:260px;
}

.brand-lockup{
  gap:14px;
}

.g-logo,
.brand-lockup .g-logo{
  width:154px;
  height:auto;
  object-fit:contain;
}

.mto-logo,
.brand-lockup .mto-logo{
  width:78px;
  height:auto;
  object-fit:contain;
}

.brand-divider,
.brand-lockup .brand-divider{
  width:1px;
  height:30px;
  background:var(--line);
}

.nav{
  display:flex;
  align-items:center;
  gap:27px;
  margin-left:auto;
}

.nav a{
  color:#3f5368;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  line-height:1;
}

.nav a:hover,
.nav a[aria-current="page"]{
  color:var(--navy);
}

.header-btn{
  margin-left:10px;
  white-space:nowrap;
}

.menu{
  display:none;
  border:0;
  background:none;
  cursor:pointer;
}

.menu span{
  display:block;
  width:22px;
  height:2px;
  background:var(--navy);
}


/* =========================================================
   05. BUTTONS / ACTIONS
========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 20px;
  border:1px solid transparent;
  border-radius:7px;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn-dark{
  background:var(--navy);
  color:var(--white);
}

.btn-dark:hover{
  background:#0d3458;
}

.btn-accent{
  background:var(--teal);
  color:var(--white);
}

.btn-accent:hover{
  background:#0e8d9d;
}

.btn-white{
  background:var(--white);
  color:var(--navy);
}

.btn-white:hover{
  background:#eef6f7;
}

.btn-ghost-light{
  background:transparent;
  border-color:rgba(255,255,255,.55);
  color:var(--white);
}

.btn-ghost-light:hover{
  background:var(--white);
  color:var(--navy);
}

.actions,
.hero-actions,
.cta-actions {
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
}

.center-actions{
  justify-content:center;
}

/* =========================================================
   HERO — GLOBAL
========================================================= */

.hero {
    width: 100%;
    min-height: 90vh;

    background: var(--navy);
    color: var(--white);

    display: flex;
    align-items: center;

    box-sizing: border-box;
}


/* =========================================================
   HERO CONTAINER
   85% of viewport width
   ≈ 7.5% margin on each side
========================================================= */

.hero .container {
    width: 85%;
    max-width: none;

    margin: 0 auto;
    padding: 0;

    box-sizing: border-box;
}


/* =========================================================
   HERO GRID
   35 : 65 after 5% gap
   Dashboard intentionally dominant
========================================================= */

.hero-grid {
    width: 100%;

    display: grid;

    grid-template-columns: 35fr 65fr;
    column-gap: 5%;

    align-items: center;
}


/* =========================================================
   HERO COPY
========================================================= */

.hero-copy {
    width: 100%;
    max-width: 540px;
    min-width: 0;
}
/* =========================================================
   HERO EYEBROW
========================================================= */

.hero-copy .eyebrow {
    margin-bottom: 22px;
    white-space: nowrap;
}

/* =========================================================
   HERO HEADLINE
========================================================= */

.hero h1 {
    margin: 0 0 20px;

    max-width: 520px;

    color: var(--white);

    font-size: clamp(42px, 2.8vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.025em;
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero p {
    max-width: 500px;

    margin: 0 0 24px;

    color: var(--white);

    font-size: var(--type-body);
    line-height: 1.48;
}


/* =========================================================
   HERO ACTIONS
========================================================= */

.hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;

    flex-wrap: nowrap;
}

.hero-actions a,
.hero-actions button {
    white-space: nowrap;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;
}


/* =========================================================
   VISUAL FRAME
========================================================= */

.visual-frame {
    position: relative;

    width: 100%;
    aspect-ratio: 1.75 / 1;

    padding: 8px;

    background: #102f4d;

    border: 1px solid rgba(255,255,255,.24);
    border-radius: 12px;

    box-shadow: 0 22px 60px rgba(0,0,0,.28);

    box-sizing: border-box;
    overflow: hidden;
}


/* =========================================================
   VISUAL IMAGE
========================================================= */

.visual-frame img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 6px;
    background: var(--white);
}

/* =========================================================
   VISUAL BADGE
========================================================= */

.visual-badge {
    position: absolute;

    right: -7px;
    top: -13px;

    z-index: 2;

    padding: 7px 12px;

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 16px;

    background: #123b5d;
    color: var(--white);

    font-size: 10px;
    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

    .hero .container {
        width: 92%;
    }

    .hero-grid {
        column-gap: 4%;
    }

    .hero h1 {
        font-size: clamp(42px, 4vw, 52px);
    }
}


@media (max-width: 900px) {

    .hero {
        min-height: auto;
        padding: 72px 0;
    }

    .hero .container {
        width: 92%;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero-copy {
        max-width: 680px;
    }

    .hero-visual {
        justify-content: center;
    }

    .dashboard-frame {
        max-width: 900px;
    }
}


@media (max-width: 600px) {

    .hero {
        padding: 56px 0;
    }

    .hero .container {
        width: calc(100% - 32px);
    }

    .hero h1 {
        font-size: 42px;
        line-height: 1.05;
    }

    .hero p {
        font-size: var(--type-body);
    }

    .hero-actions {
        flex-wrap: wrap;
    }
}



/* =========================================================
   07. SECTION SYSTEM
========================================================= */

.section{
  padding:var(--space-section) 0;
}

.section-white{
  background:var(--white);
}

.section-soft{
  background:var(--soft);
}
/* =========================================================
   GLOBAL ESG SECTION
   Standard green background for ESG-focused sections
========================================================= */

.section-esg{
  background:#86eeac;
}

.section-paper{
  background:var(--paper);
}

.section-navy{
  background:var(--navy);
  color:var(--white);
}

.section-navy h2,
.section-navy h3{
  color:var(--white);
}

.section-navy .section-head p{
  color:#c6d3df;
}


/* =========================================================
   08. GLOBAL GRID SYSTEM
========================================================= */

.grid{
  display:grid;
  width:100%;
  gap:var(--space-lg);
}

.grid-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.grid-4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.grid-5{
  grid-template-columns:repeat(5,minmax(0,1fr));
}


/* =========================================================
   09. GLOBAL CARD SYSTEM
========================================================= */

.card{
  padding:22px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:.2s ease;
}

.card .eyebrow {
  display:block;
  width:100%;
  text-align:center;
}

.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}

.card h3{
  margin:0 0 8px;
}

.card p{
  margin:0;
  color:var(--muted);
  font-size:var(--type-body);
  line-height:1.5;
}




/* ---------- Standard card icon ---------- */

.card-icon,
.outcome-icon {
  width:42px;
  height:42px;
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  flex:none;
  background:#edf8f9;
  color:var(--teal2);
  border:1px solid #d2e9eb;
  border-radius:9px;
} 

.card-icon img,
.outcome-icon img{
  width:36px;
  height:36px;
  display:block;
}

/* ---------- Number marker uses the same icon container ---------- */

.card-icon.number,
.outcome-icon.number{
  font:700 13px var(--font-label);
}

/* =========================================================
   SERVICES — NUMBER MARKER
   White marker for stronger contrast on soft background
========================================================= */

.alternative-visual-content .card-icon.number{
  background:#ffffff;
  color:var(--teal2);
  border:1px solid #d2e9eb;
}

/* =========================================================
   09A. PEOPLE / LEADERSHIP / PARTNERS
   GLOBAL COMPONENT

   Featured Founder / Partner:
   LEFT  = Photo + Name + Role + Credentials
   RIGHT = Story / Profile Content

   Additional Partners:
   Reusable people-card grid
========================================================= */


/* =========================================================
   FEATURED FOUNDER / PARTNER
========================================================= */

.leadership-profile{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:44px;
  align-items:center;

  padding:32px 40px;

  background:var(--navy);
  border-radius:var(--radius-lg);
}


/* =========================================================
   LEFT — PROFESSIONAL PROFILE
========================================================= */

.leadership-profile-card{
  text-align:center;
}


.leadership-profile-photo{
  width:190px;
  height:220px;

  margin:0 auto 16px;

  display:flex;
  align-items:flex-end;
  justify-content:center;

  overflow:hidden;
  border-radius:var(--radius-md);

  background:var(--soft);
}


.leadership-profile-photo img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center top;
}


.leadership-profile-name{
  margin:0;

  color:var(--white);

  font-family:var(--font-display);
  font-size:1.45rem;
  line-height:1.2;
}


.leadership-profile-role{
  margin-top:6px;

  color:var(--white);

  font-size:.9rem;
  line-height:1.45;
}


/* =========================================================
   PROFESSIONAL CREDENTIALS
========================================================= */

.leadership-profile-credentials{
  display:flex;
  justify-content:center;
  align-items:center;

  gap:10px;

  margin-top:12px;
}


.leadership-profile-credentials img{
  display:block;

  width:auto;
  height:30px;

  max-width:90px;

  object-fit:contain;

  background:var(--white);
}


/* =========================================================
   RIGHT — PROFILE STORY
========================================================= */

.leadership-profile-content{
  max-width:760px;

  color:var(--white);
}


.leadership-profile-content .eyebrow{
  margin-bottom:10px;
}


.leadership-profile-content h2,
.leadership-profile-content h3{
  margin-top:0;
  margin-bottom:12px;

  color:var(--white);
}


.leadership-profile-content p{
  margin:0 0 14px;

  color:#d4e0ea;

  font-size:var(--type-body);
  line-height:1.65;
}


/* =========================================================
   OPTIONAL EXPERIENCE / CREDENTIAL HIGHLIGHT
   Use only when required in the HTML
========================================================= */

.leadership-profile-experience{
  margin-top:18px;

  padding-top:16px;

  border-top:1px solid rgba(255,255,255,.22);
}


.leadership-profile-experience strong{
  display:block;

  margin-bottom:5px;

  color:var(--white);

  font-family:var(--font-heading);
  font-size:26px;
  line-height:1;
}


.leadership-profile-experience span{
  display:block;

  color:#d4e0ea;

  font-size:13px;
  line-height:1.5;
}


/* =========================================================
   PARTNER GRID
   Reusable cards for additional partners
========================================================= */

.people-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-lg);
}


/* =========================================================
   PARTNER CARD
========================================================= */

.people-card{
  overflow:hidden;

  background:var(--white);

  border:1px solid var(--line);
  border-radius:var(--radius);

  box-shadow:var(--shadow-sm);

  transition:.2s ease;
}


.people-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}


/* =========================================================
   PARTNER PHOTO
========================================================= */

.people-card-media{
  aspect-ratio:4 / 3;

  background:var(--soft);

  overflow:hidden;
}


.people-card-media img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center top;
}


/* =========================================================
   PARTNER INFORMATION
========================================================= */

.people-card-content{
  padding:22px;
}


.people-card-content h3{
  margin:0 0 6px;
}


.people-card-role{
  margin:0 0 12px;

  color:var(--muted);

  font-size:13px;
  line-height:1.5;
}


.people-card-expertise{
  padding-top:12px;

  border-top:1px solid var(--line-soft);

  color:var(--ink);

  font-size:13px;
  line-height:1.5;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:900px){

  .leadership-profile{
    grid-template-columns:220px minmax(0,1fr);
    gap:32px;

    padding:28px;
  }

  .leadership-profile-photo{
    width:170px;
    height:200px;
  }

  .people-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}


@media (max-width:700px){

  .leadership-profile{
    grid-template-columns:1fr;
    gap:28px;

    text-align:center;
  }

  .leadership-profile-photo{
    width:180px;
    height:210px;
  }

  .leadership-profile-content{
    max-width:none;
    text-align:left;
  }

  .people-grid{
    grid-template-columns:1fr;
  }

}

/* =========================================================
   10. CENTRAL VISUAL — ONE WEBSITE STANDARD
========================================================= */

.central-visual{
  width:100%;
  display:flex;
  justify-content:center;
}

.central-visual img{
  display:block;
  width:80%;
  max-width:80%;
  height:auto;
}


/* Standard central visual image treatment.
   No page-specific outer frame is required. */

.central-visual-frame{
  width:100%;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}


/* Optional light presentation surface when the actual
   visual needs contrast against a coloured section. */

.central-visual-surface{
  padding:24px;
  border-radius:var(--radius);
  background:var(--white);
}


/* =========================================================
   11. ALTERNATIVE VISUAL ROW
   Global standard: IMAGE + TEXT
   Standard ratio: 70% IMAGE / 30% TEXT
========================================================= */


/* ---------- Visual row container ---------- */

.visual-rows{
  display:flex;
  flex-direction:column;
  gap:var(--space-xxl);

  width:85%;
  margin-inline:auto;
}


/* ---------- Standard layout ---------- */

.alternative-visual{
  display:grid;
  grid-template-columns:7fr 3fr;
  gap:40px;
  align-items:center;
}


/* ---------- Visual / Media ---------- */

.alternative-visual-media{
  width:100%;
  min-width:0;
}

.alternative-visual-media img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}


/* ---------- Text ---------- */

.alternative-visual-content{
  width:100%;
  min-width:0;
}

.alternative-visual-content h3{
  margin:0 0 10px;
}

.alternative-visual-content p{
  margin:0;
  color:var(--muted);
  font-size:var(--type-body);
  line-height:1.6;
}


/* ---------- Reverse layout ---------- */
/* Same 70:30 ratio — only position is reversed */

.alternative-visual.reverse{
  grid-template-columns:3fr 7fr;
}

.alternative-visual.reverse .alternative-visual-media{
  order:2;
}

.alternative-visual.reverse .alternative-visual-content{
  order:1;
}


/* ---------- Responsive ---------- */

@media (max-width:900px){ 

  .visual-rows{
    width:100%;
  }

  .alternative-visual, 
  .alternative-visual.reverse{ 
    grid-template-columns:1fr; 
  }

  .alternative-visual-media, 
  .alternative-visual-content{ 
    width:100%; 
  }

  .alternative-visual.reverse .alternative-visual-media, 
  .alternative-visual.reverse .alternative-visual-content{ 
    order:initial; 
  }

}


/* =========================================================
   12. PRODUCT / SCREEN PRESENTATION
========================================================= */

.product-screen{
  overflow:hidden;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--soft);
}

.product-screen img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border-radius:6px;
  box-shadow:0 8px 24px rgba(16,42,70,.12);
}

.product-screen img.contain{
  object-fit:contain;
}

.product-screen img.cover{
  object-fit:cover;
}


/* Generic showcase grid */

.product-showcase{
  display:grid;
  gap:var(--space-lg);
}

.product-showcase.two-column{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.product-showcase.three-column{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.product-caption{
  padding-top:var(--space-md);
}

.product-caption .eyebrow{
  margin-bottom:8px;
}

.product-caption h3{
  margin-bottom:8px;
}

.product-caption p{
  margin:0;
  color:var(--muted);
  font-size:var(--type-body);
  line-height:1.55;
}


/* =========================================================
   13. PRODUCT ROAD / PROCESS STEPS
========================================================= */

.product-road{
  display:flex;
  flex-direction:column;
  gap:var(--space-xxl);
}

.product-step{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:64px;
}

.product-step.reverse .product-step-image{
  order:2;
}

.product-step.reverse .product-step-copy{
  order:1;
}

.product-step-image{
  min-width:0;
}

.product-step-image img{
  display:block;
  width:100%;
  height:auto;
}

.product-step-copy{
  max-width:560px;
}

.product-step-number{
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  margin-bottom:16px;
  border:1px solid #d2e9eb;
  border-radius:50%;
  background:#edf8f9;
  color:var(--teal2);
  font:700 12px var(--font-label);
}

.product-step-copy .eyebrow{
  margin-bottom:10px;
}

.product-step-copy h3{
  margin-bottom:10px;
}

.product-step-copy p{
  margin:0;
  color:var(--muted);
  font-size:var(--type-body);
  line-height:1.6;
}


/* =========================================================
   14. OUTCOME / PROOF CARDS
========================================================= */

.outcome-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.outcome-card{
  min-height:190px;
  padding:22px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:11px;
  transition:.2s ease;
}

.outcome-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.outcome-card .outcome-icon{
  margin-bottom:18px;
}

.outcome-card h3{
  margin:0 0 8px;
  color:var(--ink);
  font-family:var(--font-heading);
  font-size:var(--type-h3);
  line-height:1.15;
}

.outcome-card p{
  margin:0;
  color:var(--muted);
  font-size:var(--type-body);
  line-height:1.5;
}


/* Alternative outcome layout where the final item in an
   odd-count 2-column composition is intentionally centred. */

.outcome-cards.grid-2 > .outcome-card:last-child:nth-child(odd){
  grid-column:1 / -1;
  width:calc(50% - var(--space-lg)/2);
  margin-inline:auto;
}


/* =========================================================
   15. FEATURE PILLS
   Global reusable component
========================================================= */

.feature-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

.feature-list span{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 16px;

  border:1px solid var(--line);
  border-radius:999px;

  background:var(--white);
  color:var(--ink);

  font-size:var(--type-small);
  line-height:1.2;
  font-weight:400;

  white-space:nowrap;
}

/* =========================================================
   16. TRUST / PROOF STATEMENTS
========================================================= */

.proof-strip{
  display:flex;
  align-items:center;
  gap:16px;
  max-width:760px;
  margin:34px auto 0;
  padding:18px 24px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--white);
  box-shadow:var(--shadow-sm);
}

.proof-mark{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:50%;
  background:var(--navy);
  color:var(--teal);
  font-size:14px;
  font-weight:700;
}

.proof-strip .eyebrow{
  margin-bottom:4px;
}

.proof-strip strong{
  display:block;
  color:var(--ink);
  font-family:var(--font-heading);
  font-size:16px;
  line-height:1.25;
}

.proof-strip p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}

.product-proof{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:28px;
  color:var(--muted);
  font-size:11px;
  text-align:center;
}

.product-proof>span{
  color:var(--teal2);
  font-size:18px;
  font-weight:700;
}

/* =========================================================
   16. CONTACT / COMMUNICATION COMPONENTS
   GLOBAL COMPONENTS

   Reusable for Contact, enquiry and communication sections.
========================================================= */


/* =========================================================
   CONTACT — CONVERSATION FLOW
   Used inside the global hero visual area
========================================================= */

.conversation-card{
  min-height:300px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:42px;

  background:var(--soft);
  color:var(--ink);

  border:1px solid var(--line);
  border-radius:var(--radius);

  box-shadow:var(--shadow);
  text-align:center;
}


.conversation-card .eyebrow{
  margin-bottom:24px;
}


.conversation-flow{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;

  font-family:var(--font-label);
  font-size:var(--type-label);
  font-weight:600;
  letter-spacing:.05em;
}


.conversation-flow span{
  color:var(--teal);
  font-size:16px;
}



/* =========================================================
   CONTACT — CONTACT METHODS
   Four reusable communication cards
========================================================= */

.contact-methods{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-lg);
}


.contact-method{
  display:flex;
  align-items:flex-start;
  gap:16px;

  padding:22px;

  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);

  box-shadow:var(--shadow-sm);

  transition:.2s ease;
}


.contact-method:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}


.contact-method-icon{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  flex:none;

  border:1px solid #d2e9eb;
  border-radius:9px;

  background:#edf8f9;
  color:var(--teal2);
}


.contact-method-icon svg{
  width:22px;
  height:22px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.contact-icon-whatsapp svg{
  fill:currentColor;
  stroke:none;
}


.contact-method strong{
  display:block;
  margin-bottom:4px;

  color:var(--ink);

  font-family:var(--font-heading);
  font-size:18px;
  line-height:1.2;
}


.contact-method span{
  display:block;

  color:var(--ink);

  font-size:12px;
  line-height:1.45;
}


.contact-method small{
  display:block;
  margin-top:5px;

  color:var(--muted);

  font-size:11px;
  line-height:1.4;
}



/* =========================================================
   CONTACT — FORM
   Global reusable enquiry form
========================================================= */

.contact-form{
  max-width:820px;

  margin:42px auto 0;
  padding:34px;

  background:var(--soft);

  border:1px solid var(--line);
  border-radius:var(--radius);

  box-shadow:var(--shadow-sm);
}


.contact-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}


.form-field{
  display:flex;
  flex-direction:column;
  gap:7px;
}


.form-field-full{
  grid-column:1 / -1;
}


.form-field label{
  color:var(--ink);

  font-family:var(--font-label);
  font-size:var(--type-label);
  font-weight:600;
}


.form-field input,
.form-field select,
.form-field textarea{
  width:100%;

  padding:12px 13px;

  border:1px solid var(--line);
  border-radius:7px;

  background:var(--white);
  color:var(--ink);

  font-family:var(--font-body);
  font-size:var(--type-small);

  outline:none;

  transition:.2s ease;
}


.form-field input::placeholder,
.form-field textarea::placeholder{
  color:#91a0ad;
}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:var(--teal);

  box-shadow:
    0 0 0 2px rgba(22,166,184,.10);
}


.form-field textarea{
  min-height:140px;
  resize:vertical;
}


.phone-fields{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:8px;
}


.contact-submit{
  width:100%;
  margin-top:20px;
}


.contact-form-note{
  margin:12px 0 0;

  color:var(--muted);

  font-size:10px;
  line-height:1.45;

  text-align:center;
}



/* =========================================================
   CONTACT — NEXT STEPS
   Reusable three-step process strip
========================================================= */

.contact-process{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));

  margin-top:42px;

  background:var(--white);

  border:1px solid var(--line);
  border-radius:var(--radius);

  overflow:hidden;
}


.contact-process-step{
  padding:32px;

  text-align:center;

  border-right:1px solid var(--line);
}


.contact-process-step:last-child{
  border-right:0;
}


.contact-process-number{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  margin:0 auto 16px;

  border:1px solid #d2e9eb;
  border-radius:50%;

  background:#edf8f9;
  color:var(--teal2);

  font:700 12px var(--font-label);
}


.contact-process-step h3{
  margin:0 0 8px;
}


.contact-process-step p{
  margin:0;

  color:var(--muted);

  font-size:var(--type-body);
  line-height:1.5;
}


.contact-process-note{
  margin-top:20px;

  color:var(--teal2);

  font:600 var(--type-label) var(--font-label);

  text-align:center;
}



/* =========================================================
   CONTACT COMPONENT RESPONSIVE
========================================================= */

@media (max-width:1050px){

  .contact-methods{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}


@media (max-width:800px){

  .contact-process{
    grid-template-columns:1fr;
  }


  .contact-process-step{
    border-right:0;
    border-bottom:1px solid var(--line);
  }


  .contact-process-step:last-child{
    border-bottom:0;
  }


  .contact-form-grid{
    grid-template-columns:1fr;
  }


  .form-field-full{
    grid-column:auto;
  }

}


@media (max-width:600px){

  .contact-methods{
    grid-template-columns:1fr;
  }


  .contact-form{
    padding:24px;
  }


  .conversation-card{
    min-height:260px;
    padding:28px;
  }

}

/* =========================================================
   17. CTA
========================================================= */

.cta{
  padding:78px 0;
  background:var(--navy);
  color:var(--white);
}

.cta-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
  text-align:center;
}

.cta h2{
  margin:0 0 14px;
  color:var(--white);
}

.cta p{
  max-width:680px;
  margin:0 auto 24px;
  color:#c4d2de;
  font-size:var(--type-body);
  line-height:1.6;
}

.cta .eyebrow{
  color:#55d2df;
}

/* =========================================================
   CTA KICKER
   Used consistently across all CTA sections
========================================================= */

.cta-kicker{
  display:inline-block;

  margin-bottom:16px;

  color:var(--white);

  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  line-height:1.2;

  text-transform:uppercase;
}

/* =========================================================
   18. FOOTER
========================================================= */

.footer{
  background:#edf5f7;
  color:#4f6f8d;
  border-top:1px solid #d6e5e9;
}


.footer-grid{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.6fr .7fr .7fr;
  gap:80px;
  padding:48px 24px 40px;
}


.footer-logos{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}


.footer-logos img:first-child{
  width:170px;
  height:50px;
  object-fit:contain;
}


.footer-logos img:last-child{
  width:80px;
  height:48px;
  object-fit:contain;
}


.footer-logos span{
  width:1px;
  height:30px;
  background:#c7dce1;
}


.footer-logos + p{
  color:#4f6f8d;
}


.footer p{
  margin:0 0 12px;
  color:#4f6f8d;
  font-size:var(--type-small);
  line-height:1.6;
}


.footer-tag{
  color:var(--teal2);
  font-size:10px;
}


.footer h4,
.footer h5{
  margin:2px 0 13px;
  color:var(--navy);
  font-family:var(--font-label);
  font-size:var(--type-label);
  font-weight:600;
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
}


.footer a{
  display:block;
  margin:9px 0;
  color:#4f6f8d;
  font-size:var(--type-small);
}


.footer a:hover{
  color:var(--teal2);
}


.footer-bottom{
  border-top:1px solid #d6e5e9;
}


.footer-bottom .container,
.footer-bottom-inner{
  max-width:var(--container);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  padding:14px 24px;
  color:#71899d;
  font-size:10px;
}

/* =========================================================
   19. REUSABLE VISUAL PRIMITIVES
   These are content visuals, not page-specific layout.
========================================================= */

/* ---------- Generic small visual surface ---------- */

.visual{
  position:relative;
  height:116px;
  overflow:hidden;
  margin-bottom:14px;
  border:1px solid #dce7eb;
  border-radius:8px;
  background:linear-gradient(145deg,#f7fbfc,#eaf3f5);
}


/* ---------- Legacy / reusable challenge card ---------- */

.challenge-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.challenge-card{
  padding:14px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow-sm);
  transition:.2s ease;
}

.challenge-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}

.card-number{
  margin-bottom:5px;
  color:var(--teal);
  font:600 var(--type-label) var(--font-label);
  letter-spacing:.08em;
  line-height:1.2;
}

.challenge-card h3{
  margin:0 0 8px;
  font-size:var(--type-h3);
  line-height:1.15;
}

.challenge-card p{
  margin:0;
  color:var(--muted);
  font-size:var(--type-body);
  line-height:1.5;
}


/* ---------- Meet / flow component ---------- */

.meet-flow{
  display:grid;
  grid-template-columns:1fr 42px 1fr 42px 1fr;
  align-items:center;
}

.meet-card{
  display:grid;
  grid-template-columns:110px 1fr;
  align-items:center;
  gap:16px;
  padding:18px;
  background:var(--white);
  border:1px solid #d3e1e5;
  border-radius:10px;
  box-shadow:var(--shadow-sm);
}

.meet-visual{
  position:relative;
  height:96px;
  overflow:hidden;
  border:1px solid #d1e9eb;
  border-radius:8px;
  background:#edf8f9;
}

.step-label{
  color:var(--teal2);
  font:600 var(--type-label) var(--font-label);
  letter-spacing:.08em;
  line-height:1.2;
}

.meet-copy h3{
  margin:7px 0 5px;
  font-size:var(--type-h3);
  line-height:1.15;
}

.meet-copy p{
  margin:0;
  color:var(--muted);
  font-size:var(--type-body);
  line-height:1.5;
}

.flow-arrow{
  color:var(--teal2);
  font-size:28px;
  text-align:center;
}


/* ---------- Credibility / proof list ---------- */

.credibility-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:60px;
}

.cred-copy h2{
  margin:0 0 18px;
  font-size:clamp(2.5rem,3.3vw,3.7rem);
  line-height:1.02;
}

.cred-copy p{
  max-width:620px;
  color:var(--muted);
  font-size:var(--type-small);
  line-height:1.65;
}

.proof-card{
  padding:18px 24px;
  background:#edf4f6;
  border:1px solid #d4e0e4;
  border-radius:10px;
}

.proof{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:15px 0;
  border-bottom:1px solid #d3e0e4;
}

.proof:last-child{
  border-bottom:0;
}

.proof strong{
  font-size:13px;
}

.proof span{
  color:var(--muted);
  font-size:11px;
  text-align:right;
}


/* ---------- Small flow visuals retained for Home ---------- */

.v-network .node{
  position:absolute;
  width:18px;
  height:18px;
  border:4px solid #d7f1f3;
  border-radius:50%;
  background:#0b9cac;
  box-shadow:0 0 0 1px #0b9cac;
}

.v-network .n1{left:19%;top:25%}
.v-network .n2{left:49%;top:14%}
.v-network .n3{right:16%;top:32%}
.v-network .n4{left:35%;bottom:18%}
.v-network .n5{right:30%;bottom:13%}

.v-network .line{
  position:absolute;
  height:2px;
  background:#7dbcc4;
  transform-origin:left center;
}

.v-network .l1{width:125px;left:24%;top:31%;transform:rotate(-18deg)}
.v-network .l2{width:120px;left:53%;top:23%;transform:rotate(20deg)}
.v-network .l3{width:95px;left:41%;top:32%;transform:rotate(75deg)}
.v-network .l4{width:90px;left:44%;top:73%;transform:rotate(-40deg)}

.v-manual .sheet{
  position:absolute;
  width:46%;
  height:56%;
  background:#fff;
  border:1px solid #cbdce2;
  border-radius:5px;
  box-shadow:4px 5px 0 #dce9ec;
}

.v-manual .s1{left:8%;top:22%;transform:rotate(-5deg)}
.v-manual .s2{left:27%;top:30%;transform:rotate(5deg)}

.v-manual b{
  display:block;
  height:5px;
  margin:9px 8px;
  border-radius:3px;
  background:#b7dfe4;
}

.v-manual .cursor{
  position:absolute;
  right:15%;
  bottom:15%;
  color:#0c9bab;
  font-size:33px;
  font-weight:700;
}

.v-versions .report{
  position:absolute;
  left:16%;
  width:68%;
  height:55%;
  padding:10px;
  border:1px solid #cbdce2;
  border-radius:5px;
  background:#fff;
  box-shadow:5px 5px 0 #e2ecef;
  color:#607589;
  font-size:8px;
}

.v-versions .r1{top:15%;transform:rotate(-7deg)}
.v-versions .r2{top:22%}
.v-versions .r3{top:29%;transform:rotate(7deg)}

.v-versions strong{
  float:right;
  color:#d96b52;
}

.v-visibility .chart{
  position:absolute;
  left:13%;
  bottom:18%;
  width:58%;
  height:58%;
  display:flex;
  align-items:flex-end;
  gap:10px;
}

.v-visibility .chart i{
  width:20%;
  border-radius:3px 3px 0 0;
  background:#79bfc7;
}

.v-visibility .chart i:nth-child(1){height:28%}
.v-visibility .chart i:nth-child(2){height:48%}
.v-visibility .chart i:nth-child(3){height:72%}
.v-visibility .chart i:nth-child(4){height:94%}

.v-visibility .veil{
  position:absolute;
  right:10%;
  top:12%;
  width:44%;
  height:76%;
  border:1px solid #d3e1e5;
  background:rgba(247,250,251,.78);
  transform:skew(-12deg);
}

.v-visibility .eye{
  position:absolute;
  right:17%;
  top:37%;
  color:#0c9bab;
  font-size:33px;
}

.v-intelligence .question{
  position:absolute;
  right:13%;
  top:19%;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border:2px solid #9fcbd0;
  border-radius:50%;
  background:#fff;
  color:#0c9bab;
  font:700 28px var(--font-heading);
}

.v-intelligence .signal{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#0c9bab;
}

.v-intelligence .a{left:18%;top:57%}
.v-intelligence .b{left:35%;top:43%}
.v-intelligence .c{left:52%;top:62%}

.v-intelligence .axis{
  position:absolute;
  left:22%;
  top:53%;
  width:40%;
  height:2px;
  background:#7dbcc4;
  transform:rotate(-12deg);
}

.v-slow .hourglass{
  position:absolute;
  left:40%;
  top:14%;
  width:64px;
  height:78px;
  border:3px solid #79aeb5;
  border-radius:7px;
  clip-path:polygon(0 0,100% 0,70% 50%,100% 100%,0 100%,30% 50%);
}

.v-slow .hourglass:before,
.v-slow .hourglass:after{
  content:"";
  position:absolute;
  left:9px;
  right:9px;
  height:3px;
  background:#79aeb5;
}

.v-slow .hourglass:before{top:16px}
.v-slow .hourglass:after{bottom:16px}

.v-slow .sand{
  position:absolute;
  left:48%;
  top:40%;
  width:18px;
  height:22px;
  background:#d8a448;
  clip-path:polygon(0 0,100% 0,65% 50%,100% 100%,0 100%,35% 50%);
}


/* ---------- Meet visual primitives ---------- */

.data-visual .db-icon{
  position:absolute;
  left:14px;
  top:31px;
  width:34px;
  height:28px;
  border:2px solid #17a2b0;
  border-radius:5px;
  background:#fff;
}

.data-visual .db2{left:39px;top:16px}
.data-visual .db3{left:64px;top:46px}

.data-visual i{
  position:absolute;
  left:43px;
  top:43px;
  width:38px;
  height:2px;
  background:#63b7bf;
  transform:rotate(-20deg);
}

.data-visual i:nth-of-type(2){
  left:46px;
  transform:rotate(20deg);
}

.data-visual i:nth-of-type(3){
  left:68px;
  top:45px;
  transform:rotate(-10deg);
}

.transform-visual .gear{
  position:absolute;
  color:#0c91a0;
  font-size:31px;
}

.transform-visual .g1{left:18px;top:18px}
.transform-visual .g2{left:48px;top:38px;font-size:27px}

.transform-visual .arrow{
  position:absolute;
  right:10px;
  top:28px;
  color:#0c91a0;
  font-size:38px;
}

.explain-visual .brain{
  position:absolute;
  left:36px;
  top:28px;
  color:#0c91a0;
  font-size:42px;
}

.explain-visual i{
  position:absolute;
  right:19px;
  top:19px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#0c91a0;
}

.explain-visual i:nth-of-type(2){top:46px;right:12px}
.explain-visual i:nth-of-type(3){top:70px;right:24px}

.explain-visual b{
  position:absolute;
  right:23px;
  top:50px;
  width:45px;
  height:2px;
  background:#73bbc1;
  transform:rotate(-28deg);
}


/* =========================================================
   20. GLOBAL RESPONSIVE SYSTEM
========================================================= */

@media (max-width:1150px){

  .header-inner{
    gap:18px;
  }

  .nav{
    gap:18px;
  }

  .nav a{
    font-size:12px;
  }

  .brand{
    min-width:220px;
  }

  .brand-lockup .g-logo{
    width:135px;
  }

  .brand-lockup .mto-logo{
    width:70px;
  }

  .grid-5{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .product-showcase.three-column{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hero-grid{
    grid-template-columns:1fr 1fr;
    gap:28px;
  }

  .challenge-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .credibility-grid{
    gap:40px;
  }
}


@media (max-width:1050px){

  .outcome-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


@media (max-width:900px){

  :root{
    --space-section:72px;
  }

  .grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .visual-row,
  .product-step{
    grid-template-columns:1fr;
    gap:32px;
  }

  .visual-row.reverse .visual-row-media,
  .visual-row.reverse .visual-row-content,
  .product-step.reverse .product-step-image,
  .product-step.reverse .product-step-copy{
    order:initial;
  }

  .product-showcase.three-column{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .meet-flow{
    grid-template-columns:1fr;
  }

  .flow-arrow{
    height:28px;
    transform:rotate(90deg);
  }

  .credibility-grid{
    grid-template-columns:1fr;
    gap:30px;
  }

  .hero h1{
    font-size:clamp(2.8rem,4.5vw,4rem);
  }
}


@media (max-width:800px){

  .outcome-cards{
    grid-template-columns:1fr;
  }

  .outcome-cards.grid-2 > .outcome-card:last-child:nth-child(odd){
    width:100%;
    grid-column:auto;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5{
    grid-template-columns:1fr;
  }
}


@media (max-width:700px){

  :root{
    --space-section:60px;
  }

  h1{
    font-size:clamp(2.7rem,11vw,4rem);
  }

  h2{
    font-size:clamp(2.1rem,8vw,3rem);
  }

  h3{
    font-size:20px;
  }

  .container,
  .header-inner{
    width:min(var(--container),calc(100% - 36px));
  }

  .header{
    height:64px;
  }

  .header-inner{
    min-height:64px;
  }

  .brand{
    min-width:auto;
    gap:9px;
  }

  .brand-lockup{
    gap:9px;
  }

  .brand-lockup .g-logo{
    width:118px;
  }

  .brand-lockup .mto-logo{
    width:62px;
  }

  .brand-divider,
  .brand-lockup .brand-divider{
    height:24px;
  }

  .nav,
  .header-btn{
    display:none;
  }

  .menu{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-left:auto;
  }

  .hero-grid{
    grid-template-columns:1fr;
    min-height:auto;
    padding-block:54px;
  }

  .hero-media{
    justify-content:stretch;
  }

  .dashboard-frame{
    width:100%;
  }

  .hero-copy>p{
    font-size:14px;
  }

  .section{
    padding:64px 0;
  }

  .section-head h2{
    font-size:clamp(2.2rem,9vw,3rem);
  }

  .visual{
    height:125px;
  }

  .product-showcase.two-column,
  .product-showcase.three-column{
    grid-template-columns:1fr;
  }

  .product-proof{
    flex-direction:column;
  }

  .proof-strip{
    align-items:flex-start;
  }

  .cta{
    padding:60px 0;
  }

  .cta-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .cta-actions .btn{
    width:100%;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:34px;
  }

  .footer-brand{
    grid-column:1/-1;
  }

  .footer-bottom .container,
  .footer-bottom-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .meet-card{
    grid-template-columns:1fr;
  }

  .meet-visual{
    height:100px;
  }

  .btn{
    width:auto;
  }
}


@media (max-width:520px){

  .footer-grid{
    grid-template-columns:1fr;
  }

  .footer-brand{
    grid-column:auto;
  }

  .hero-copy>p{
    font-size:14px;
  }

  .visual{
    height:125px;
  }
}


@media (max-width:420px){

  :root{
    --space-section:52px;
  }

  .brand-lockup .g-logo{
    width:105px;
  }

  .brand-lockup .mto-logo{
    width:56px;
  }

  .brand-lockup{
    gap:7px;
  }

  .btn{
    width:100%;
  }
}


/* =========================================================
   END — WEBSITE STYLE v2.0
========================================================= */